<script setup lang="ts">
import { usePageInfo } from '../store/cacheStorage'
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'

const router = useRouter()
const { setInfo } = usePageInfo()
const curSelect = ref()
const searchAreaOptions = ref([
  {label: 'aaa', value: 1111},
  {label: 'aa1', value: 1112},
  {label: 'aa2', value: 1113},
  {label: 'aa3', value: 1114},
  {label: 'aa4', value: 1115},
  {label: 'aa5', value: 1116},
  {label: 'aa6', value: 1117},
  {label: 'aa7', value: 1118},
  {label: 'aa8', value: 1119},
  {label: 'aa9', value: 1100},
  {label: 'aa11', value: 1101},
  {label: 'aa12', value: 1102},
  {label: 'aa13', value: 1103},
  {label: 'aa14', value: 1104},
])
const handleStorage = () => {
  console.log('aaa')
  setInfo({ name: 'aaa', age: 12, info: 'school info' })
  router.push('/second')
}
// 自定义 popper 配置，将菜单挂载到指定容器
const popperOptions = {
  modifiers: [
    {
      name: "custom-append",
      enabled: true,
      phase: "write",
      fn({ state }) {
        const popperEl = state.elements.popper;
        const container = document.querySelector("#custom-container");
        if (popperEl && container && popperEl.parentNode !== container) {
          container.appendChild(popperEl);
        }
      },
    },
  ],
};
const handleChange = () => {
  console.log('change事件...')
}
onMounted(() => {
  setTimeout(() => {
    curSelect.value = 1100
  }, 200)
})
</script>

<template>
  <div class="container">
    <div class="left-bar">lefdfdsafsafsdfasgafdgfdgdfgfsdgsadsadast</div>
    <div class="content">content</div>
    <button @click="handleStorage">存储</button>
    <div id="custom-container" class="test-aaab"></div>
    <el-select v-model="curSelect" option="" :popper-options="popperOptions" popper-class="test-aaa" @change="handleChange">
    <el-option
      v-for="item in searchAreaOptions"
      :key="item.label"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
body {
  width: 100%;
}

.container {
  width: 100%;
  height: 100%;
  /* border: 1px solid #ccc; */
  background-color: aquamarine;
  display: flex;
}
.left-bar {
  width: 216px;
  /* border-right: 1px solid #ccc; */
  height: 100%;
  background-color: aqua;
 
}
.content {
  width: 100%;
  height: 100%;
  /* border: 1px solid #ccc; */
  background-color: antiquewhite;
}
</style>
<style lang="scss">
.test-aaab .el-select-dropdown .el-scrollbar__thumb {
  background-color: red !important;
  opacity: 1 !important;
  width: 100px !important;
}
.test-aaab .el-scrollbar__bar.is-vertical {
  width: 20px !important;
}
</style>
